var Card = {
		id : '4C',
		width : 48,
		height : 76,
		x : 0,
		y : 0,
		originalPosX : 0,
		originalPosY : 0,
		bgImg : null,
		bgBackImg : null,
		bgox : 0,
		bgoy : 0,
		hidden : true,
		animate : {
			shrink : false,
			expand : false,
			progress : 0,
			step : 25,
			tox : 0,
			toy : 0,
			tw : 1,
			th : 1,
			midCallback : function() {},
			endCallback : function() {}
		},
		isInStack : true,
		
		init : function(x,y) {
			this.x = this.originalPosX = x;
			this.y = this.originalPosY = y;
			this.bgImg = Preloader.getImg('cards.png');
			this.bgBackImg = Preloader.getImg('card-back.png');
			$g('c').add(this);
			
		},

		update : function() {
			if (this.animate.shrink || this.animate.expand) {
				this.animate.progress += this.animate.step;
				var p = (this.animate.shrink ? 100 : 0) - this.animate.progress;
				this.animate.th = p / 100;
				this.animate.toy = (100-p) /100 * this.height/2;
			}
			

			if (this.animate.progress >= 100) {
				if (this.animate.shrink) {
					this.animate.shrink = false;
					this.animate.expand = true;
					this.animate.midCallback();
				} else {
					this.animate.shrink = this.animate.expand = false;
					this.animate.tox = this.animate.toy = 0;
					this.animate.tw = this.animate.th = 1;
					this.animate.endCallback();
				}
				this.animate.progress = 0;
			}
		},

		draw : function(ctx, canvas) {
			var x = this.x, y = this.y;
			if (this.isInStack) {
				x = Table.cardStack.x;
				y = Table.cardStack.y;
			}
			
			if (this.hidden === true) {
				ctx.drawImage(this.bgBackImg, x,
						y + this.animate.toy, this.width, this.height * this.animate.th);

			} else if (this.hidden === false) {
				ctx.drawImage(this.bgImg, this.bgox, this.bgoy,
						this.width, this.height, x, y + this.animate.toy, this.width, this.height * this.animate.th);
			}
		},

		show : function() {
			var self = this;
			this.animate.midCallback = function(){self.hidden = false;};
			this.animate.shrink = true;
		},
		hide : function() {
			var self = this;
			this.animate.midCallback = function(){self.hidden = true;};
			this.animate.shrink = true;
		},
		isHidden : function() {
			return this.hidden;
		},

		changeFace : function(id) {
			console.log(id);
			var color = id.substr(1, 1);
			var value = id.substr(0, 1);
			var x = y = 0;
			if (isNaN(parseInt(value))) {
				if (value == 'J')
					x = this.width * 9;
				else if (value == 'Q')
					x = this.width * 10;
				else if (value == 'K')
					x = this.width * 11;
				else if (value == 'A')
					x = this.width * 12;
			} else {
				value = parseInt(value);
				if (value == 0)
					value = 10;
				x = this.width * (value - 2);
			}

			if (color == 'D')
				y = 0;
			else if (color == 'H')
				y = this.height;
			else if (color == 'S')
				y = this.height * 2;
			else if (color == 'C')
				y = this.height * 3;

			this.bgox = x;
			this.bgoy = y;
		},
		
		updateCoords : function(x,y) {
			this.x = this.originalPosX = x;
			this.y = this.originalPosY = y;
		},
		
		moveToStack : function() {
			this.originalPosX = this.x;
			this.originalPosY = this.y;
			Animator.start(this, 'x', Table.cardStack.x, 300);
			Animator.start(this, 'y', Table.cardStack.y, 300);
		},
		moveFromStack : function() {
			this.x = Table.cardStack.x;
			this.y = Table.cardStack.y;
			this.isInStack = false;
			Animator.start(this, 'x', this.originalPosX, 300);
			Animator.start(this, 'y', this.originalPosY, 300);
		}
	};